<template>
    <div class="report-third-child">
        <div class="report-third-child-title">
            <div style="float:left">
                <div style="line-height:55px;">
                    <span style="color:#212121;font-size:20px;">排行榜</span>
                </div>
            </div>
            <div style="float:right;margin-right:5px;line-height:55px;">
                <div class="chaos-small-button " @click="changeDate(1)" v-bind:class="is1day==true?'chaos-small-button-active':''">
                    <span>日榜</span>
                </div>

                <div class="chaos-small-button" @click="changeDate(3)" v-bind:class="is3day==true?'chaos-small-button-active':''">
                    <span>三日</span>
                </div>

                <div class="chaos-small-button" @click="changeDate(7)" v-bind:class="is7day==true?'chaos-small-button-active':''">
                    <span>周榜</span>
                </div>
            </div>
        </div>

        <div class="report-third-child-content" v-if="isType1==true">
            <hotspotRank v-if="res.length>0" :video-info="res[0]"></hotspotRank>
            <hotspotRank v-if="res.length>1" :video-info="res[1]"></hotspotRank>
            <hotspotRank v-if="res.length>2" :video-info="res[2]"></hotspotRank>
            <div class="hostpot-abridge" v-if="res.length>3">
                <div class="hostpot-abridge-index">
                    4
                </div>
                <span class="show-more-title" @click="doSpick(res[3])">
                    {{res[3].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>4">
                <div class="hostpot-abridge-index">
                    5
                </div>
                <span class="show-more-title" @click="doSpick(res[4])">
                    {{res[4].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>5">
                <div class="hostpot-abridge-index">
                    6
                </div>
                <span class="show-more-title" @click="doSpick(res[5])">
                    {{res[5].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>6">
                <div class="hostpot-abridge-index">
                    7
                </div>
                <span class="show-more-title" @click="doSpick(res[6])">
                    {{res[6].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>7">
                <div class="hostpot-abridge-index">
                    8
                </div>
                <span class="show-more-title" @click="doSpick(res[7])">
                    {{res[7].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>8">
                <div class="hostpot-abridge-index">
                   9
                </div>
                <span class="show-more-title" @click="doSpick(res[8])">
                    {{res[8].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>9">
                <div class="hostpot-abridge-index">
                    10
                </div>
                <span class="show-more-title"  @click="doSpick(res[9])">
                     {{res[9].videoTitle}}
                </span>
            </div>
<!--            <div class="show-more" v-if="res.length>9">-->
<!--                查看完整榜单 <i class="el-icon-arrow-right"></i>-->
<!--            </div>-->
        </div>

        <div class="report-third-child-content" v-if="isType1==false">
            <hotspotRank v-if="res.length>0" :video-info="res[0]"></hotspotRank>
            <hotspotRank v-if="res.length>1" :video-info="res[1]"></hotspotRank>
            <hotspotRank v-if="res.length>2" :video-info="res[2]"></hotspotRank>
            <hotspotRank v-if="res.length>3" :video-info="res[3]"></hotspotRank>
            <hotspotRank v-if="res.length>4" :video-info="res[4]"></hotspotRank>
            <hotspotRank v-if="res.length>5" :video-info="res[5]"></hotspotRank>
            <hotspotRank v-if="res.length>6" :video-info="res[6]"></hotspotRank>
            <hotspotRank v-if="res.length>7" :video-info="res[7]"></hotspotRank>
            <hotspotRank v-if="res.length>8" :video-info="res[8]"></hotspotRank>
            <hotspotRank v-if="res.length>9" :video-info="res[9]"></hotspotRank>
        </div>

    </div>
</template>

<script>
    import hotspotRank from "@/components/reportThird/hotspotRank";

    export default {
        components:{hotspotRank},
        name: 'videoChildPaihang',
        props: {
            fenquParent: {   // 可选字段，有默认值
                type: Number
            },
            fenquChild: {   // 可选字段，有默认值
                type: Number
            },
            isType1:{
                type:Boolean,
                default:false
            }
        },
        data () {
            return {
                paihangbangForm:{
                    fenquParent:'',
                    fenquChild:''
                },
                is1day:true,
                is3day:false,
                is7day:false,
                res:[]

            }
        },
        methods:{
           doSpick(videoInfo){
               var self = this;
               var localStorage = window.localStorage;
               localStorage.setItem("videoInfo",JSON.stringify(videoInfo));
               this.$router.push("/chamVideo");
               var formData = new FormData();
               formData.append("videoId",videoInfo.videoId);
               self.$api.post('video-service/videoController/addBofangCount',formData,result=>{
               });
               //debugger;
           },
            changeDate(index){
               var self = this;
               if(index===1){
                   self.is1day = true;
                   self.is3day = false;
                   self.is7day = false;
               }

                if(index===3){
                    self.is1day = false;
                    self.is3day = true;
                    self.is7day = false;
                }

                if(index===7){
                    self.is1day = false;
                    self.is3day = false;
                    self.is7day = true;
                }

                self.doSearch();
            },
            doSearch(){
                var self = this;

                if(self.is1day){
                    self.$api.get('video-service/videoController/getVideoInfo1dayTop10ByFenquParentAndChild',self.paihangbangForm, result => {
                        self.res = result;
                    });
                }

                if(self.is3day){
                    //查找动漫区前10的视频
                    self.$api.get('video-service/videoController/getVideoInfo3dayTop10ByFenquParentAndChild',self.paihangbangForm, result => {
                        self.res = result;
                    });
                }

                if(self.is7day){
                    //查找动漫区前10的视频
                    self.$api.get('video-service/videoController/getVideoInfo7dayTop10ByFenquParentAndChild',self.paihangbangForm, result => {
                        self.res = result;
                    });
                }
            }
        },
        mounted(){
            var self = this;
            if(self.fenquParent===1){
                self.paihangbangForm.fenquParent = "01";
            }

            if(self.fenquParent===2){
                self.paihangbangForm.fenquParent = "02";
            }

            if(self.fenquParent===3){
                self.paihangbangForm.fenquParent = "03";
            }

            if(self.fenquParent===4){
                self.paihangbangForm.fenquParent = "04";
            }

            if(self.fenquParent===5){
                self.paihangbangForm.fenquParent = "05";
            }

            if(self.fenquParent===6){
                self.paihangbangForm.fenquParent = "06";
            }

            if(self.fenquParent===7){
                self.paihangbangForm.fenquParent = "07";
            }

            if(self.fenquParent===8){
                self.paihangbangForm.fenquParent = "08";
            }

            if(self.fenquParent===9){
                self.paihangbangForm.fenquParent = "09";
            }

            if(self.fenquParent===10){
                self.paihangbangForm.fenquParent = "10";
            }

            if(self.fenquChild===0){
                self.paihangbangForm.fenquChild = "00";
            }

            if(self.fenquChild===1){
                self.paihangbangForm.fenquChild = "01";
            }

            if(self.fenquChild===2){
                self.paihangbangForm.fenquChild = "02";
            }

            if(self.fenquChild===3){
                self.paihangbangForm.fenquChild = "03";
            }
            self.doSearch();
        }
    }
</script>

<style scoped>
    .report-third-child{
        width:324px;
        height:570px;
    }

    .report-third-child-title{
        height:60px;
        width:324px;
    }

    .report-third-child-content{
        height:446px;
        width:324px;
    }

    .chaos-small-button{
        border-radius: 3px;
        width:40px;
        height:28px;
        color:black;
        display: inline-block;
        line-height: 28px;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
    }

    .chaos-small-button-active{
        border: 1px solid #fae7e8;
        color: #fd4c5b;
        background: rgba(253,76,91,.1);
    }

    .hostpot-abridge{
        width:324px;
        height:28px;
        line-height:28px;
    }

    .hostpot-abridge-index{
        float:left;
        width:25px;
        text-indent:4px;
        font-size:12px;
        color:#999999;
    }
    .show-more{
        width:324px;
        height:28px;
        line-height:28px;
        text-align:center;
        color:#333333;
        background-color:#EEEEEE;
        margin-top:5px;
        border-radius: 2px;
        cursor:pointer;
    }

    .show-more-title{
        color:#333333;
        font-size:12px;
        cursor:pointer;
    }

    .show-more-title:hover{
        color:#fd4c5a;
    }

</style>
